<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 编写盒子模型样式-->
    <style>
		.box{width:290px;height:70px;border-radius:10px;border:1px solid black;}
		.box div{float:left;margin-left:20px;width:45px;height: 45px;border-radius: 45px;border:1px solid purple;margin-top: 10px;}
		.box .count{width: 60px;border: 0px;font-size: 280%;}
		.red{background-color:red ;}
		.yellow{background-color: yellow;}
		.green{background-color: green;}
	</style>

</head>
<body>
    <body>
		<div class="box">
			<div id="red"></div>  <!-- 红灯 -->
			<div id="yellow"></div>  <!--黄灯 -->
			<div id="green"></div>  <!-- 绿灯 -->
			<div id="count" class="count"></div>  <!-- 倒计时 -->
		</div>

</body>
<script>
    //创建红绿灯对象
    var lamp={
				red:{  //红灯相关数据
					obj:document.getElementById("red"),					
					timeout:30,
					style:['red','gray','gray'],
					next:'green'
				},
				yellow:{  //黄灯相关数据
					obj:document.getElementById("yellow"),
					timeout:5,
					style:['gray','yellow','gray'],					
					next:'red'
				},
				green:{  //绿灯相关数据
					obj:document.getElementById("green"),
					timeout:35,
					style:['gray','gray','green'],					
					next:'yellow'
				},
				changeStyle(style){  //设置信号背景色样式
					this.red.obj.className=style[0];
					this.yellow.obj.className=style[1];
					this.green.obj.className=style[2];
				}				
			};
    //创建倒计时对象
            var count={
				obj:document.getElementById('count'),  //倒计时的元素对象
				change:function(num){
					this.obj.innerHTML=(num<10)?('0'+num):num;
				}
			};
    //初始化页面
            var now=lamp.green;           //获取绿灯亮的相关数据
			var timeout=now.timeout;      //获取绿灯亮灯的剩余时间
			lamp.changeStyle(now.style);  //设置绿灯亮时,红绿灯背景色样式
			count.change(timeout);        //设置绿灯亮灯的剩余时间
    //实现红绿灯倒计时
            setInterval(function(){
				if(--timeout<=0){         //切换信号灯
					now=lamp[now.next];   //获取下一个亮灯的信号灯的相关数据
					timeout=now.timeout;  //获取信号灯的剩余时间
					lamp.changeStyle(now.style); //设置信号灯背景色样式
				}
				count.change(timeout);    //设置信号灯亮灯的剩余时间
			},1000);
			


</script>
</html>